Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Quiz exercises: Improve user experience when creating modeling drag and drop exercises #7261

Merged
merged 7 commits into from
Oct 3, 2023
Merged

Quiz exercises: Improve user experience when creating modeling drag and drop exercises #7261

merged 7 commits into from
Oct 3, 2023

Conversation

milljoniaer
Copy link
Contributor

@milljoniaer milljoniaer commented Sep 24, 2023 •
edited
Loading

Checklist

General

Client

  • Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
  • I followed the coding and design guidelines.
  • Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
  • I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
  • I documented the TypeScript code using JSDoc style.
  • I added multiple screenshots/screencasts of my UI changes.
  • I translated all newly inserted strings into English and German.

Motivation and Context

This PR is a collection of multiple issues regarding the quiz modeling exercise user experience of both instructors and students.
Hence, Closes #7211 closes #7020

Description

  • it shows a validation error to instructors when there are no interactive elements in an apollonDiagram which is used to generate a quiz exercise (this issue led to the false impression, that the button is not working at all and not only input missing)
  • it navigates to the edit page of the generated drag-and-drop quiz exercise
  • it increases the auto-scroll speed of draggables when they are moved to the borders of the viewport (the default value is quite slow)
  • it increases the height of the draggable items container to 100vh - the footer height

Steps for Testing

First improvement:

Prerequisites:

  • 1 Instructor
  • 1 course
  1. Log in to Artemis
  2. Navigate to Course Administration
  3. Go to exercises
  4. click on "Create Drag and Drop Quiz"
  5. click "Generate quiz"
  6. See the validation error that there are interactive elements missing
  7. Add interactive elements to your model
  8. click "Generate quiz"
  9. See the success message
  10. Verify that you are navigated to the edit page

Second and third improvement

Prerequisites:

  • 1 Student
  • 1 dnd quiz with a lot of draggables and exercises below the dnd exercise
  1. Log in to Artemis
  2. Start quiz
  3. Verify that the container of draggables is as large as the viewport
  4. Drag item and move to the bottom/top of page, so that it starts to scroll
  5. Verify that the scrolling is faster and feels comfortable

Review Progress

Code Review

  • Code Review 1
  • Code Review 2

Manual Tests

  • Test 1
  • Test 2

Test Coverage

Screenshots

@milljoniaer milljoniaer requested a review from a team as a code owner September 24, 2023 16:24
@milljoniaer milljoniaer marked this pull request as draft September 24, 2023 16:24
@github-actions github-actions bot added the client Pull requests that update TypeScript code. (Added Automatically!) label Sep 24, 2023
@github-actions github-actions bot added the tests label Sep 26, 2023
@milljoniaer milljoniaer changed the title Quiz exercises: improve modelling exercise user experience Quiz exercises: improve modeling exercise user experience Sep 26, 2023
@milljoniaer milljoniaer marked this pull request as ready for review September 26, 2023 15:23
@krusche krusche changed the title Quiz exercises: improve modeling exercise user experience Quiz exercises: Improve user experience when creating modeling drag and drop exercises Sep 26, 2023
@krusche krusche added this to the 6.5.4 milestone Sep 26, 2023
dearjasmina
dearjasmina previously approved these changes Sep 29, 2023
View reviewed changes
Copy link
Contributor

@dearjasmina dearjasmina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code lgtm,
side question: "validateError" translation in german here is "Fehler beim Erstellen", german is not my first language but maybe consider using validieren instead?

@milljoniaer milljoniaer requested a review from a team September 30, 2023 08:34
@milljoniaer
Copy link
Contributor Author

Yes, you are right, it is semantically not totally the same. But I liked this version better in German (I copied the first part from the normal error) and since the second part hints that there are interactive elements missing, I would stick to this version for now.

MaximilianAnzinger
MaximilianAnzinger requested changes Sep 30, 2023
View reviewed changes
Copy link
Collaborator

@MaximilianAnzinger MaximilianAnzinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good. I still think the translation for the error is incorrect, validation is not the same as creation. This feels inconsistent.

@milljoniaer
Copy link
Contributor Author

Alright, then lets change it, what do you think about "Validierungsfehler: Interaktive Elemente werden zum Generieren benötigt." for the german translation?

@milljoniaer milljoniaer temporarily deployed to artemis-test4.artemis.cit.tum.de October 2, 2023 11:53 — with GitHub Actions Inactive
basak-akan
basak-akan approved these changes Oct 2, 2023
View reviewed changes
Copy link
Contributor

@basak-akan basak-akan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for fixing this! Tested on TS4 with provided steps, and worked as expected.

MaximilianAnzinger
MaximilianAnzinger approved these changes Oct 2, 2023
View reviewed changes
Copy link
Collaborator

@MaximilianAnzinger MaximilianAnzinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM 👍

lennart-keller
lennart-keller suggested changes Oct 2, 2023
View reviewed changes
Copy link
Contributor

@lennart-keller lennart-keller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS4. The instructor improvements work fine.
However, the scrolling does not work properly for me using Chrome (version 117) on a Mac. It either scrolls very slowly or just scrolls a tiny bit when reaching the viewport borders and then stops.

@milljoniaer
Copy link
Contributor Author

Thanks for finding this bug. I tested this only on windows. However, I just also could verify, that it is an issue on macs. So I adjusted this PR so it wont close the issue and I will leave a comment in #7019 that there is an issue on macs.

I suggest to merge this PR like it is, since it has other important things and it also improves the scrolling on windows.

@lennart-keller
Copy link
Contributor

Thanks for finding this bug. I tested this only on windows. However, I just also could verify, that it is an issue on macs. So I adjusted this PR so it wont close the issue and I will leave a comment in #7019 that there is an issue on macs.

I suggest to merge this PR like it is, since it has other important things and it also improves the scrolling on windows.

Thank you, sounds good!

@lennart-keller lennart-keller self-requested a review October 2, 2023 15:25
@milljoniaer milljoniaer mentioned this pull request Oct 2, 2023
Open
@krusche krusche merged commit a55031a into develop Oct 3, 2023
31 of 35 checks passed
@krusche krusche deleted the feat/improve-quiz-model-ux branch October 3, 2023 08:27
@milljoniaer milljoniaer mentioned this pull request Oct 4, 2023
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lennart-keller lennart-keller lennart-keller approved these changes

@MaximilianAnzinger MaximilianAnzinger MaximilianAnzinger approved these changes

@basak-akan basak-akan basak-akan approved these changes

@dearjasmina dearjasmina Awaiting requested review from dearjasmina

Assignees

@milljoniaer milljoniaer

Labels
client Pull requests that update TypeScript code. (Added Automatically!) ready for review tests
Projects
None yet
Milestone
6.5.4
6 participants
@milljoniaer @lennart-keller @basak-akan @dearjasmina @MaximilianAnzinger @krusche